.table-buttons {
  position: absolute;
  margin: 0;
  overflow: hidden;
  z-index: 2;
}

.table-buttons div,
.table-options div {
  float: left;
  min-width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin-right: 1px;
  margin-bottom: 1px;
  padding: 4px 6px;
}

.table-options div {
  margin-bottom: 0;
}

.table-buttons.edit {
  width: auto;
  z-index: 111113;
}

.table-options.main {
  width: auto;
}

.table-buttons.edit div.alert-gray,
.table-options div {
  background: #444444;
}

.table-buttons div.table-bold {
  font-weight: bold;
}

.table-buttons div.table-italic {
  font-style: italic;
}

.table-buttons div.delete-row,
.table-buttons div.delete-column {
  background-color: #c5463f;
}

.table-buttons div.add-top,
.table-buttons div.add-bottom,
.table-buttons div.add-left,
.table-buttons div.add-right {
  background-color: #439439;
}

.table-options {
  position: absolute;
  top: -32px;
  margin: 0;
  overflow: hidden;
}

.table-buttons.left div {
  float: none;
}

.table-buttons.top {
  height: 25px;
  z-index: 111112;
}

.table-buttons.top .add-left {
  position: absolute;
  left: 0;
}

.table-buttons.top .add-right {
  position: absolute;
  right: 0;
}

.table-buttons.left {
  width: 25px;
  z-index: 111112;
}

.table-buttons.left .add-top {
  position: absolute;
  top: 0;
}

.table-buttons.left .add-bottom {
  position: absolute;
  bottom: 0;
}

.table-widget {
  position: relative;
}

.table-options .alert-success {
  margin-left: 5px;
}

.helper-line {
  position: absolute;
  display: none;
  z-index: 100000;
}

.delete-marker td,
.delete-marker th,
th.delete-marker,
td.delete-marker,
tr.delete-marker {
  background-color: #c5463f !important;
  color: white !important;
  border-color: #A33C36 !important;
}

td.active-field {
  outline: 2px solid #444;
}

.table-options.main div,
.table-buttons.edit div {
  display: none;
}

.table-options.main div:first-child,
.table-buttons.edit div:first-child {
  display: block;
}

[data-scrivito-display-mode='editing'] table td:focus,
[data-scrivito-display-mode='editing'] table th:focus {
  outline: 2px dotted #439439 !important;
}
